import {useCallback, useState} from 'react';
import {useTranslation} from 'react-i18next';
import axios from 'axios';
import {message} from 'antd';
import KnowledgeNavigation from '@/components/KnowledgeNavigation';
import styles from "../index.module.scss";
import image1 from "../assets/image_1.png";
import image2 from "../assets/image_2.png";
import image3 from "../assets/image_3.png";
import image4 from "../assets/image_4.png";
import image5 from "../assets/image_5.png";

export default function Encyclopedia() {
  const [isClicked, setIsClicked] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const {t} = useTranslation();
  const handlePostStatic = useCallback(
    async (isHelp: boolean) => {
      const res = await axios.post('/api/statistic', {
        action: 'helpful',
        info: {
          good: isHelp,
        },
      });
      setIsClicked(res.data.code === 0);
      messageApi.open({
        type: 'success',
        content: '感谢您的反馈！',
      });
    }, [t]);
  return (
    <div className={styles.page}>
      <div className={styles.wrap}>
        <div className={styles.container}>
          <KnowledgeNavigation />

          <div className={styles.content1}>
            <div className={styles.main1}>
              <div className={styles.section1}>
                <div className={styles.subSection1}>
                  <div className={styles.text3}>
                    <span className={styles.text3__seg0}>{t('错位色觉')}</span>
                  </div>
                </div>
                <div className={styles.subSection2}>
                  <div className={styles.block1}>
                    <div className={styles.subBlock1}></div>
                  </div>
                  <div className={styles.text4}>
                    <span className={styles.text4__seg0}>{t('知识科普')}</span>
                  </div>
                </div>
                <div className={styles.subSection3}>
                  <div className={styles.block2}>
                    <div className={styles.subBlock2}></div>
                  </div>
                  <div className={styles.text5}>
                    <span className={styles.text5__seg0}>{t('疫病知识')}</span>
                  </div>
                </div>
              </div>
              <div className={styles.section2}>
                <div className={styles.subSection4}>
                  <div className={styles.block3}>
                    <div className={styles.subBlock3}>
                      <div className={styles.text6}>
                        <a id="1" className={styles.text10_a}></a>
                        <span className={styles.text6__seg0}>疫病知识</span>
                      </div>
                      <div className={styles.div4}>
                        <div className={styles.div5}>
                          <div className={styles.text7}>
                            <span className={styles.text7__seg0}>
                              更新时间：2024年10月30日
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img
                    src={image1}
                    className={styles.image}
                  />
                </div>
              </div>
              <div className={styles.section3}>
                <div className={styles.block4}>
                  <div className={styles.subBlock4}>
                    <div className={styles.div6}>
                      <div className={styles.text8}>
                        <span className={styles.text8__seg0}>疾病介绍</span>
                      </div>
                      <div className={styles.text9}>
                        <div className={styles.text9__linebreak}>
                          <span className={styles.text9__seg0}>
                            如因遗传或因后天眼病引起辨色力较差或甚至分辨不出颜色，称之为色觉异常（color&nbsp;vision&nbsp;abnormality）&nbsp;或色觉障碍（color&nbsp;vision&nbsp;defect），也就是通常所称的色盲。在全球，色盲色弱男性患病率为8%，12个男性里有1个患者。200个女性有1个患者。全球有3亿患者。在国内，色盲色弱的男性患病率为5%，21个中国男性里有1个患者。女性患病率约为0.8%，但相关致病基因携带者比例为9%，11个中国女性中就有1个是相关致病基因携带者。全国有4000万患者。
                          </span>
                        </div>
                        <div>
                          <span className={styles.text9__seg0}>
                            疾病原因：正常人的视网膜锥细胞有感应红、绿、蓝三种原色的感光色素。如果视锥细胞缺少某一种或几种感光色素，则会导致人体无法识别对应的颜色。
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img
                    src={image2}
                    className={styles.image1}
                  />

                </div>
              </div>
              <div className={styles.section4}>
                <div className={styles.subSection6}>
                  <div className={styles.text10}>
                    <a id="2" className={styles.text10_a}></a>
                    <span className={styles.text10__seg0}>疾病类别</span>
                  </div>
                  <div className={styles.text11}>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg0}>
                        色觉异常由其发病原因可分为先天性和后天性两大类。
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg0}>
                        先天性色觉异常，又俗称为我们所说的色盲，是出于色觉基因异常或缺失所导致的一类常见的人类遗传病。是指对各种颜色心理感受的不正常，按程度轻重分为色盲和色弱。色盲是缺乏或完全没有对某一种或几种原色的辨别力。而色弱则是对一种或多种原色的辨别力降低或不足
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg0}>
                        色盲可以由严重程度来分类，从上到下，最轻到最严重依次为：
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg0}></span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg1}>
                        异常三色视：也就是通常所说的色弱，可细分为红色弱，绿色弱和蓝色弱。异常三色视患者可以感知到红，绿，蓝三种颜色，但与正常人所感受到的原色比例有差别。
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg1}>
                        异常二色视：也简称二色视，指的是我们通常所说的红色盲(缺少红色感光色素，只能识别绿色和蓝色)，绿色盲（缺少绿色感光色素，只能识别红色和蓝色）和蓝色盲（缺少蓝色感光色素，只能识别绿色和红色）。
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg1}>
                        蓝锥单色视：就是我们通常提到的真正意义上的红-绿色盲（缺少绿色和红色感光色素，只能识别蓝色）
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg1}>
                        全色盲：无法识别任何颜色。视野中只由黑色、灰色和白色组成。类似我们观看的黑白电视机图像。
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg2}> </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg2}>
                        后天性色觉异常又称为获得性色觉异常，为某些眼病、颅脑病变、全身病变以及中毒所导致的并发症，除色觉异常外，常合并视力，视野以及其他功能障碍
                      </span>
                    </div>
                    <div className={styles.text11__linebreak}>
                      <span className={styles.text11__seg2}>
                        疫病治疗：虽然先天性色觉异常（色盲）理论上无法被根治，但是目前也有诸如光生物调节等治疗措施来重新训练对光的敏感度，以达到一定的治疗效果。
                      </span>
                    </div>
                    <div>
                      <span className={styles.text11__seg2}>
                        后天性色觉异常则随引发其症状的病症的变化而好转或恶化。
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.section5}>
                <div className={styles.subSection7}>
                  <div className={styles.block5}>
                    <div className={styles.subBlock5}>
                      <div className={styles.text12}>
                        <span className={styles.text12__seg0}>
                          下一篇：文章标题
                        </span>
                      </div>
                    </div>
                    <img
                      src={image3}
                      className={styles.image2}
                    />
                  </div>
                </div>
              </div>
              <div className={styles.section6}>
                <div className={styles.subSection8}>
                  <div className={styles.text13}>
                    <span className={styles.text13__seg0}>
                      {t('这篇科普是否对您有帮助?')}
                    </span>
                  </div>
                  <div className={styles.block6}>
                    <div className={styles.subBlock6}>
                      <div className={styles.div8} style={{opacity: isClicked ? .4 : 1}} onClick={() => handlePostStatic(true)}>
                        <div className={styles.div9}>
                          <img
                            src={image4}
                            className={styles.image3}
                          />
                          <div className={styles.text14}>
                            <span className={styles.text14__seg0}>{t('有帮助')}</span>
                          </div>
                        </div>
                      </div>
                      <div className={styles.div8} style={{opacity: isClicked ? .4 : 1}} onClick={() => handlePostStatic(false)}>
                        <div className={styles.div9}>
                          <img
                            src={image5}
                            className={styles.image3}
                          />
                          <div className={styles.text14}>
                            <span className={styles.text14__seg0}>{t('没帮助')}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.content2}>
            <div className={styles.main2}>
              <div className={styles.section7}>
                <div className={styles.text16}>
                  <span className={styles.text16__seg0}>{t('本页导读')}</span>
                </div>
              </div>
              <div className={styles.section8}>
                <div className={styles.subSection10}>
                  <div className={styles.block7}>
                    <div className={styles.subBlock7}>
                      <div className={styles.div12}></div>
                      <div className={styles.text17}>
                        <div className={styles.text17__listwrap}>
                          <span className={styles.text17__seg0}><a href="#1">{t('疾病介绍')}</a></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={styles.block7}>
                    <div className={styles.subBlock7}>
                      <div className={styles.div12}></div>
                      <div className={styles.text17}>
                        <div className={styles.text17__listwrap}>
                          <span className={styles.text17__seg0}><a href="#2">{t('疾病类别')}</a></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {contextHolder}
    </div>
  );
}
